<template>
    <div class="box-item">
        <div class="box-title">设备管理</div>
        <div class="box-body">
            <div class="sb">设备总数：<span class="ext">623个</span></div>
            <div class="chart-container">
                <Echart id="charts_top1" :options="options" class="left_center_inner" ref="charts1" height="250px" />
                <div class="bg"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { getPie3D, getParametricEquation } from '@/utils/chart'; //工具类js，页面路径自己修改

export default {
    name: 'DJtopleft',
    data() {
        return {
            options: {},
            optionData: [
                {
                    name: '消防',
                    value: 29,
                    itemStyle: {
                        color: '#D13DF2',
                    },
                },
                {
                    name: '安防',
                    value: 33,
                    itemStyle: {
                        color: '#6A43F3',
                    },
                },
                {
                    name: '充电桩',
                    value: 21,
                    itemStyle: {
                        color: '#6CCEE6',
                    },
                },
                {
                    name: '道闸',
                    value: 14,
                    itemStyle: {
                        color: '#284DF3',
                    },
                },
            ],
        };
    },
    created() {
        this.getData();
    },
    mounted() { },
    beforeDestroy() { },
    methods: {
        getData() {
            let legend = {
                // orient: "horizontal",
                bottom: '5%',
                left: '8%',
                itemGap: 14, // 设置图例之间的间距为20像素
                textStyle: {
                    color: '#fff',
                    margin: [0, 0, 0, 0],
                    padding: [0, 0, 0, -10], // 设置文本相对于图例项的内边距，从而增加间距
                },
                formatter: function (param) {
                    return param;
                },
            };
            // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
            const options = getPie3D(this.optionData, 0.05, 580, 25, 16, 0.9, legend);
            options.series.push({
                // backgroundColor: 'transparent',
                type: 'pie',
                label: {
                    // show: true,
                    opacity: 1,
                    fontSize: 13,
                    lineHeight: 20,
                    // normal: {
                    show: true,
                    formatter: '{d}%' // 自定义标签格式，{b} 表示名称，{d} 表示数据值
                    // }
                },
                startAngle: -40, // 起始角度，支持范围[0, 360]。
                clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                radius: ['20%', '45%'],
                center: ['50%', '55%'],
                data: this.optionData,
                itemStyle: {
                    opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
                },
            });
            this.options = options;
        },
    },
};
</script>

<style lang="scss" scoped>
.box-item {
    width: 297px;
    height: 292px;
    background: url('../../../assets/img/launch/internet/homeTopbox.png') no-repeat center;
    background-position: center center;
    background-size: 100% 100%;
    // margin-bottom: 25px;

    .box-title {
        position: relative;
        height: 55px;
        line-height: 55px;
        text-indent: 1em;
        font-size: 18px;
        font-weight: 600;

        &::after {
            position: absolute;
            top: -2px;
            content: url('../../../assets/img/launch/pack/pack_nav.png');
        }
    }

    .box-body {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        // height: 320px;

        .sb {
            width: 260px;
            height: 60px;
            background: url('../../../assets/img/launch/pack/pack_box.png') no-repeat center;
            background-position: center center;
            background-size: 260px 60px;
            line-height: 60px;
            text-align: center;

            .ext {
                color: #ffab07;
                font-weight: 600;
                font-size: 26px;
                line-height: 60px;
            }
        }

        .chart-container {
            position: relative;
            width: 100%;
            height: 160px;

            .left_center_inner,
            .bg {
                width: 100%;
                height: 100%;
            }

            .left_center_inner {
                left: 5px;
                top: -75px;
                z-index: 1;
                // border: 1px solid red;
            }

            .bg {
                position: absolute;
                bottom: 25px;
                left: 53%;
                background: url('../../../assets/img/launch/pie_bg.png') no-repeat center;
                background-size: 75% 75%;
                transform: translateX(-50%);
            }
        }
    }
}
</style>